<template>
  <div class="bigBox">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>设备管理</el-breadcrumb-item>
      <el-breadcrumb-item>借出和归还记录</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row> </el-row>
    <h2>借出和归还记录</h2>

    <el-row :gutter="24">
      <el-col :span="3">
        <el-button type="danger">查看未处理申请</el-button>
      </el-col>

      <el-col :span="3">
        <el-input v-model="input" placeholder=" 请输入编码或名称"></el-input>
      </el-col>

      <el-col :span="2">
        <el-input v-model="input" placeholder="借用人姓名"></el-input>
      </el-col>

      <el-col :span="6">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="-"
          start-placeholder="报修起始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-col>

      <el-col :span="6">
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="-"
          start-placeholder="修理起始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-col>

      <el-col :span="2" style="padding-right: 5px">
        <el-button
          type="primary"
          class="chaXun"
          style="background-color: #3f3f65"
          >查询</el-button
        >
      </el-col>

      <el-col :span="2">
        <el-dropdown style="padding-right: 1px">
          <el-button
            type="primary"
            style="
              background-color: white;
              color: #3f3f65;
              border-color: #3f3f65;
            "
          >
            导出Excel<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item></el-dropdown-item>
            <el-dropdown-item>导出全部</el-dropdown-item><br />
            <el-dropdown-item>导出选中</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>

    <div class="from color">
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column label="分类" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>

        <el-table-column label="名称" width="120"> </el-table-column>

        <el-table-column label="编码" show-overflow-tooltip width="110">
        </el-table-column>

        <el-table-column label="单价（元）" show-overflow-tooltip width="110">
        </el-table-column>

        <el-table-column label="借出数量" show-overflow-tooltip width="50">
        </el-table-column>

        <el-table-column label="规格" show-overflow-tooltip width="110">
        </el-table-column>

        <el-table-column label="借用人姓名" show-overflow-tooltip width="110">
        </el-table-column>

        <el-table-column label="所在部门" show-overflow-tooltip width="110">
        </el-table-column>

        <el-table-column label="借出时间" show-overflow-tooltip width="110">
        </el-table-column>

        <el-table-column label="归还时间" show-overflow-tooltip width="110">
        </el-table-column>

        <el-table-column label="归还数量" show-overflow-tooltip width="50">
        </el-table-column>

        <el-table-column label="归还状态" show-overflow-tooltip width="110">
        </el-table-column>

        <el-table-column label="丢失数量" show-overflow-tooltip width="50">
        </el-table-column>

        <el-table-column label="操作" show-overflow-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="查看详情"
            placement="top"
          >
            <el-button
              type="warning"
              circle
              class="el-icon-search"
              @click="dialogVisible = true"
            ></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="归还" placement="top">
            <el-button type="success" icon="el-icon-check" circle></el-button>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" content="挂失" placement="top">
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="100"
      class="pag"
    >
    </el-pagination>
  </div>
</template>
	
	<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },

  methods: {},
};
</script>
	
	<style>
* {
  margin: 0;
  padding: 0;
}
.bigBox {
  padding: 20px;
  color: #3f3f65;
}

h2 {
  padding: 10px 0;
}

.from {
  padding: 10px 0;
}

.tu1 {
  width: 100px;
  height: 50px;
}
.shouSuo {
  width: 300px;
  height: 50px;
}
.tu2 {
  width: 50px;
  height: 50px;
}

.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}

.el-icon-upload2 {
  height: 50px;
  width: 50px;
  font-size: 30px;
  cursor: pointer;
}
.el-icon-download {
  height: 60px;
  width: 60px;
  font-size: 30px;
  cursor: pointer;
}
.pag {
  float: right;
}
</style>
	